const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: path.join(__dirname, './src/js/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
    },
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin ({
            template: './src/index.html',
            filename: 'index.html' // 输出文件【注意：这里的根路径是module.exports.output.path】
        }),
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin()
    ],
    devServer: {
        contentBase: './src',
        hot:true
    },
    module: {
        rules: [
            {test:/\.css$/, use: ['style-loader', 'css-loader']},
            {test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {test:/\.(png|jpg|svg|gif)$/, use: ['url-loader?limit=9302&name=[hash:8]-[name].[ext]']},
            {test:/\.(woff|woff2|eot|ttf|svg)$/, use: ['url-loader']},
            {test:/\.js$/,  loader: 'babel-loader',include: [path.join(__dirname,'src')]},
            {test:/\.vue$/, use: ['vue-loader']}
        ]
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }
}